<template>
    <div class="advisoryDetails" >
        <div class="title">
          <van-nav-bar
            title="咨询详情"
            left-arrow
            :fixed="fixd"
            @click-left="onClickLeft"
            />
        </div>
        <!-- 内容 -->
        <div class="content">   
            <div class="con_tit">
                <h3>{{objData.consultTitle}}</h3>
                <p class="con_time">{{objData.source}} {{objData.consultTime | dateFmt("YYYY-MM-DD")}}</p>
                <p class="con_tent">{{objData.consultSketch}}</p>
                <div class="con_img">
                    <!-- <img src="../assets/readMore/img4.png" alt=""> -->
                    <img :src="objData.consultUrl" alt="">
                </div>
                <p class="con_bottImg"></p>
                <div class="con_zan">
                    <div >
                        <i class="iconfont iconzan"></i>
                       <span>{{objData.consultTags}}</span>
                    </div>
                </div>
            </div>
             <!-- 推荐咨询 -->
            <div class="heated">
                <img src="../assets/readMore/img5.png" alt="">
                <span>推荐咨询</span>
            </div>
              <!-- 咨询列表 -->
          <div class="informationList">
            <ul>
                 <li class="listData" v-for="(item,index) in recommendList" :key="index">
                    <div class="top">
                        <div class="left">
                            <h3>{{item.consultTitle}}</h3>
                            <p>{{item.consultSketch}}</p>
                        </div>
                        <div class="right">
                            <!-- <img src="../assets/index/index20.png" alt="">  -->
                            <img :src="item.consultUrl" alt="">       
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left_con">
                            <span v-if="item.top==1">置顶</span>
                            <span>{{item.source}}</span>
                            <span>{{item.consultTime | dateFmt("YYYY-MM-DD")}}</span>
                        </div> 
                        <div class="right_con">
                            <span>{{item.consultComment}}</span>
                            <span>讨论</span>
                        </div>   
                    </div>
                </li>
            </ul>
        </div>
         <!-- 热门评论 -->
        <div class="hotComments">
            <h3>热门评论</h3>
            <ul>
                <li id="comment" v-for="(item,index) in commentList" :key="index" >
                    <div class="left">
                        <div class="hot_img">
                            <!-- <img src="../assets/readMore/img6.png" alt=""> -->
                            <img :src="item.commentUuid" alt="">
                        </div>
                        <div class="hot_con">
                            <p>{{item.commentName}}</p>
                            <p>{{item.commentContent}}</p>
                            <p>{{item.commentTime | dateFmt("YYYY-MM-DD")}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <div @click="commentsThumb(item.commentId,item.commentUser)" >
                            <i class="iconfont iconzan" ></i>
                            <span>{{item.commentSum}}</span>
                        </div>
                    </div>
                </li>
               
            </ul>
            <!-- <div class="lookMore">
                <span>查看更多 </span>
            </div> -->
            <div class="footInput">
                <div class="foot_ipt">
                    <i class="iconfont iconcomment"></i>
                    <input type="text" placeholder="写评论..." v-model="textContent">
                </div>
                <div class="foot_send" @click="sendComments">发送</div>
            </div>
        </div>
        </div>
    </div>  
</template>
 
<script>
import { NavBar } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      consultId:"",
      objData:{},
      recommendList:[],
      commentList:[],
      textContent:'',
      picUrl:require('../assets/Mymi/village.png'),
      flag:"true"
    };
  },
    props:{
        fixd:{
            type:Boolean,
            value:true
        }
    },
  created (){
  
      this.consultId =this.$route.query.id;
      this.getData ();
      this.getRecommendConsulting();
      this.getCommentList();
       
     
  },
  computed :{
      time (){
     
      return times 
      }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取数据
    getData (){
        this.$axios.post("/cct/consult/findByConsulId",{
          consultId:this.consultId
        }).then(res =>{
          console.log("咨询详情数据",res);
          if(res.data.code==0){
             this.objData =res.data.data;
          }
        })
    },
    //咨询详情
    goAdvisoryDetails (){

    },
    //获取推荐咨询
    getRecommendConsulting (){
      this.$axios.post("/cct/consult/findTop",{}).then(res =>{
        if(res.data.code==0){
           console.log("获取推荐咨询",res)
           this.recommendList = res.data.data;
        }
      })
    },
    //评论点赞
    commentsThumb (val,num) {
       this.$axios.post("/cct/comment/updateCommentSum",{
         commentId:val,
         commentUser:JSON.parse(localStorage.getItem("key")).userId
       }).then(res =>{
         console.log("评论点赞",res)
         if(res.data.code==0){
            Toast(res.data.msg)
             this.getCommentList();
         }
       })
    },
    //获取评论详情列表
    getCommentList (){
       this.$axios.post("/cct/comment/findByCctConsultID",{
         commentConsult:this.consultId
       }).then(res =>{
         console.log('获取评论列表',res);
         if(res.data.code==0){
            this.commentList =res.data.data;
         }
       })
    },
    //发送评论
    sendComments (){
         var time =new Date();
        var date =time.getDate();
        var year =time.getFullYear();
        var month =time.getMonth()+1;
        var times =year+'-'+month+'-'+date;
        var imgUrl = localStorage.getItem("imgperson");
        var nickName =localStorage.getItem("nickName");
        var commentId =JSON.parse(localStorage.getItem('key')).userId;
     
       
      var objData ={
          commentConsult:this.consultId,
          commentUser:commentId,
          commentName:nickName==''?'admin':nickName,
          commentUuid:imgUrl==''?this.picUrl:imgUrl,
          commentContent:this.textContent,
          commentTime:times,
      }
      this.$axios.post("/cct/comment/add",objData).then(res =>{
          if(res.data.code==0){
            this.textContent =''
              this.getCommentList();
              //  var comment = this.$refs.comment.commetscrollIntoView({block: "end"});
              // document.getElementById('comment').scrollIntoView(true);
              //  this.$nextTick(() => {
              //     let msg = document.getElementById('comment') // 获取对象
              //     msg.scrollTop = msg.scrollHeight // 滚动高度
              //   })

               
          }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.advisoryDetails {
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
  font-size: 0;
  .content {
    width: 100%;
    padding: 0.15rem 0.2rem;
    box-sizing: border-box;
    .con_tit {
      background-color: #fff;
      padding: 0.2rem 0.05rem 0.4rem 0.05rem;
      box-sizing: border-box;
      h3 {
        color: #3c3c3c;
        font-size: 0.32rem;
        font-family: PingFang-SC-Medium;
        font-weight: Medium;
      }
      .con_time {
        color: #999;
        font-size: 0.24rem;
        font-family: PingFang-SC-Medium;
        font-weight: Medium;
        margin: 0.15rem 0;
      }
      .con_tent {
        color: #666;
        font-size: 0.28rem;
        font-family: PingFang-SC-Medium;
        font-weight: Medium;
        line-height: 0.4rem;
        margin-bottom: 0.2rem;
      }
      .con_img {
        width: 100%;
        height: 4.4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .con_zan {
        width: 100%;
        text-align: center;
        margin-top: 0.25rem;
        div {
          display: inline-block;
          padding: 0.1rem 0.2rem;
          border-radius: 0.4rem;
          border: 1px solid #999999;
          margin: 0 auto;
          font-size: 0.32rem;
          color: #666;
        }
      }
    }
    //    推荐咨询
    .heated {
      padding: 0.2rem 0.3rem;
      box-sizing: border-box;
      color: #333;
      font-size: 0.28rem;
      margin-top: 0.2rem;
      background-color: #fff;
      img {
        width: 0.32rem;
        height: 0.36rem;
        vertical-align: -2px;
        margin-right: 0.1rem;
        vertical-align: -4px;
      }
    }
    //咨询内容
    .informationList {
      width: 100%;
      margin-top: 0.2rem;

      ul {
        li {
          margin-bottom: 0.15rem;
          background-color: #fff;
          padding: 0.2rem 0.3rem;
          box-sizing: border-box;
        }
        li.listData .top {
          display: flex;
          justify-content: space-between;
          .left {
            width: 70%;
            h3 {
              font-weight: bold;
              font-size: 0.3rem;
              color: #3c3c3c;
            }
            p {
              font-size: 0.24rem;
              color: #999;
              line-height: 0.3rem;
              margin-top: 0.1rem;
            }
          }
          .right {
            flex-shrink: 1;
            width: 1.66rem;
            height: 1.47rem;
            border-radius: 0.15rem;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .bottom {
          font-size: 0.22rem;
          display: flex;
          justify-content: space-between;
          padding: 0.1rem 0;
          box-sizing: border-box;
          margin-top: 0.05rem;
          .left_con {
            span {
              display: inline-block;
              padding: 0 0.1rem;
              box-sizing: border-box;
              &:nth-child(1) {
                border: 1px solid #da1e0b;
                border-radius: 0.1rem;
                padding: 0.03rem 0.1rem;
                font-size: 0.24rem;
                color: #da1e0b;
              }
              &:nth-child(2) {
                color: #b3b3b3;
              }
              &:nth-child(3) {
                color: #b3b3b3;
              }
            }
          }
          .right_con {
            span {
              display: inline-block;
              padding: 0 0.1rem;
              &:nth-child(1) {
                color: #da1e0b;
              }
              &:nth-child(2) {
                color: #b3b3b3;
              }
            }
          }
        }
      }
    }
    //热门评论
    .hotComments{
        margin-top:0.2rem;
        width: 100%;
        background: #fff;
        padding:0.15rem 0.2rem;
            box-sizing: border-box;
        h3{
            color:#333;
            font-size: 0.28rem;
            font-family: PingFang-SC-Medium;
            font-weight: Medium;
            
        }
        ul{
          margin-bottom:1rem;
        }
        li{
            margin-bottom: 0.2rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top:0.2rem;
            .left{
                display: flex;
                justify-content: flex-start;
                .hot_img{
                    width: 0.8rem;
                    height: 0.8rem;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 0.15rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .hot_con{
                   p{
                        font-family: PingFang-SC-Medium;
                            font-weight: Medium;
                       &:nth-child(1){
                            color:#38A83F;
                            font-size: 0.24rem;
                            margin-bottom: 0.2rem;
                       }
                        &:nth-child(2){
                            color:#333333;
                            font-size: 0.26rem;
                             margin-bottom: 0.2rem;
                       }
                        &:nth-child(3){
                            color:#333;
                            font-size: 0.2rem;
                       }
                   }
                }
            }
            .right{
                i{
                    color:#da1e0b;
                    font-size: 0.4rem;
                }
                span{
                    color:#333;
                    font-size: 0.26rem;
                    font-family: PingFang-SC-Medium;
                    font-weight: Medium;
                }
            }
        }
    }
    .lookMore{
        color:#999;
        font-size: 0.24rem;
        text-align: center;
        font-family: PingFang-SC-Medium;
        font-weight: Medium;
        margin-top:0.3rem;
        margin-bottom: 0.2rem;
       
    }
    .footInput{
         margin-top:0.5rem;
         font-size: 0.28rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0.15rem 0;
         box-sizing: border-box;
           position: fixed;
            bottom: 0;
            left:0;
            right: 0;
            background-color: #fff;
         .foot_ipt{
            width:5.42rem;
            height:0.58rem;
            // background:rgba(248,248,248,1);
            border-radius:29px; 
            line-height: 0.58rem;
            padding-left: 0.2rem;
            background-color: none;
            i{
                font-size: 0.36rem;
                vertical-align: -3px;
            }
            input{
                width: 90%;
                border-radius: 0.58rem;
                height: 100%;
                font-size: 0.24rem;
                background-color: none;
            }
         }
         .foot_send{
             width:1.2rem;
            height:0.58rem;
            background:rgba(56,168,63,1);
            border-radius:0.29rem;
            color:#fff;
            font-size: 0.28rem;
            text-align: center;
            line-height: 0.58rem;
          
            
         }
    }
  }
}
</style>
